<template>
  <div class="home">
    <!-- <video id="video" autoplay width="600" height="400"></video> -->
    <!--    <div class="nav">-->
    <!--      <div class="gradient-text-one">元宝山露天煤矿连续工艺集控平台</div>-->
    <!--      <div class="title">视频报警记录</div>-->
    <!--      <div></div>-->
    <!--    </div>-->
    <div class="wrapper">
      <div class="right">
        <div class="video">
          <div class="video-box">
            <div
              class="box-item"
              :style="{
                width: videoList.length == 1 ? '100%' : videoList.length == 4 ? '49.9%' : '33.3%',
                height: videoList.length == 1 ? '100%' : videoList.length == 4 ? '49.9%' : '33.3%',
              }"
              v-for="(item, index) in videoList"
              :key="index"
            >
              <iframe style="height: 100%; width: 100%" id="iframeVideo" :src="item.url" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
        <div class="video-bottom">
          <img src="../../assets/View1.png" @click="videoClick(1)" alt="" />
          <img src="../../assets/View4.png" @click="videoClick(4)" alt="" />
          <img src="../../assets/View9.png" @click="videoClick(9)" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    name: 'HomeView',
    data() {
      return {
        show: true,
        currentIndex: -1,
        videoList: [
          { index: 0, url: '' },
          { index: 1, url: '' },
          { index: 2, url: '' },
          { index: 3, url: '' },
        ],
        // webRtcServer: null,
        // webRtcServer1: null,
        options: [
          {
            value: '选项1',
            label: '全部录像类型',
          },
        ],
        value: '',
        options1: [
          {
            value: '选项1',
            label: '中心存储',
          },
        ],
        value1: '',
        value2: '',
        value3: '',
        url: '',
        width: '100%',
        height: '1000px',
        data: [
          {
            label: '采煤一部监控',
            isChildren: false,
            children: [
              {
                label: '154、164分流小车限位',
                isChildren: false,
                children: [
                  {
                    label: '154-311小车限位',
                    isChildren: true,
                    url: '2c55f79f8ddc46fca65d5267e3740b43',
                  },
                  {
                    label: '154-321小车限位',
                    isChildren: true,
                    url: '00d7fa90fd5e496cb613e5a2b93f37e9',
                  },
                  {
                    label: '164-321小车限位',
                    isChildren: true,
                    url: 'd5a863c132f64bd0a08e2ebcf8c5f889',
                  },
                  {
                    label: '164-311小车限位',
                    isChildren: true,
                    url: '57ef1cb7a02c4bddb46d646e62d07de3',
                  },
                ],
              },
              {
                label: '311皮带',
                isChildren: false,
                children: [
                  {
                    label: '311-1',
                    isChildren: true,
                    url: 'ed569c066c924e2bb5148208555fce6d',
                  },
                  {
                    label: '311-2',
                    isChildren: true,
                    url: 'd65e70df36724f7e8990544e204bc5d9',
                  },
                  {
                    label: '311-3',
                    isChildren: true,
                    url: 'de8006b4ffb44b1ca23ff277452e46d9',
                  },
                  {
                    label: '311-4',
                    isChildren: true,
                    url: 'b42162d25672412d9ff87e0aeeb51b1d',
                  },
                  {
                    label: '311-5',
                    isChildren: true,
                    url: '71595c8b82a34c37962235934f42b627',
                  },
                  {
                    label: '311-6',
                    isChildren: true,
                    url: 'aba916cb6aa94ffc822f1b3ed57df3e2',
                  },
                  {
                    label: '311-7',
                    isChildren: true,
                    url: '8ff800fe90ec4aedbb7c3d62944b9f08',
                  },
                  {
                    label: '311-8',
                    isChildren: true,
                    url: '225e5bbba30b48b6aa73f999ba238b67',
                  },
                  {
                    label: '311-9',
                    isChildren: true,
                    url: 'fb24a72411bd4b98b2ab2e520ec8e636',
                  },
                  {
                    label: '311-10',
                    isChildren: true,
                    url: 'dfdebe3f12d444d4ace7476605b9fb77',
                  },
                  {
                    label: '311-11',
                    isChildren: true,
                    url: '8168be28ae2b4af69bdf2e1b6541bc95',
                  },
                  {
                    label: '311-12',
                    isChildren: true,
                    url: 'd45dfc43bab24ef38037c0366da3e2d1',
                  },
                ],
              },
              {
                label: '312皮带',
                isChildren: false,
                children: [
                  {
                    label: '312-1',
                    isChildren: true,
                    url: 'c75a9671e091416ab9853e1e2bb8d19a',
                  },
                  {
                    label: '312-2',
                    isChildren: true,
                    url: '794acb61d94a4326a2918c6145012f83',
                  },
                  {
                    label: '312-3',
                    isChildren: true,
                    url: '413579ed32114325ab3c04948414933f',
                  },
                  {
                    label: '312-4',
                    isChildren: true,
                    url: 'f460b2e3a6bb463ab6005913b381aeb8',
                  },
                  {
                    label: '312-5',
                    isChildren: true,
                    url: '1dda0bf823804b8aa0e643b3dad005dd',
                  },
                  {
                    label: '312-6',
                    isChildren: true,
                    url: '0a891125d1c2480d86bc06847db80ba0',
                  },
                  {
                    label: '312-7',
                    isChildren: true,
                    url: '262c845f37064275996c97e8032c1c3e',
                  },
                  {
                    label: '312-8',
                    isChildren: true,
                    url: '8f16efac9ce441c7b54d250ce36aeb74',
                  },
                  {
                    label: '312-9',
                    isChildren: true,
                    url: '0b0cbdf2530f45a19763c94cc2743363',
                  },
                  {
                    label: '312-10',
                    isChildren: true,
                    url: 'fd80cf9e78aa432e80e89e50beeadc93',
                  },
                  {
                    label: '312-11',
                    isChildren: true,
                    url: '4f17b0192ba040a88c67b46d12166d08',
                  },
                  {
                    label: '312-12',
                    isChildren: true,
                    url: 'a9850f7985214a7db155616f469ef308',
                  },
                  {
                    label: '312-13',
                    isChildren: true,
                    url: '06ccd57bbde843148a03174e9b6b8b4f',
                  },
                  {
                    label: '312-14',
                    isChildren: true,
                    url: '2e28a18490204fb5a03da6aae18f6681',
                  },
                ],
              },
              {
                label: '313皮带',
                isChildren: false,
                children: [
                  {
                    label: '313-1',
                    isChildren: true,
                    url: '733eac849e6d44e3bfaa42ab74b2904c',
                  },
                  {
                    label: '313-2',
                    isChildren: true,
                    url: 'f5bc3eb6e4704b678fcffcd09292b7d4',
                  },
                  {
                    label: '313-3',
                    isChildren: true,
                    url: '5e79b27811e84ac0aa469aabf04728f6',
                  },
                  {
                    label: '313-4',
                    isChildren: true,
                    url: '64de0355dce14d2ebe527ebd265a4351',
                  },
                  {
                    label: '313-5',
                    isChildren: true,
                    url: '2e350ea45b4b446bbace5319c576dd9d',
                  },
                  {
                    label: '313-6',
                    isChildren: true,
                    url: '1602711bc36349d181f8c084596ead4d',
                  },
                  {
                    label: '313-7',
                    isChildren: true,
                    url: 'a9c254ff4cba47ffa17505154f89a02b',
                  },
                  {
                    label: '313-8',
                    isChildren: true,
                    url: '104c04663fc94d368d47fc957aacaf7d',
                  },
                  {
                    label: '313-9',
                    isChildren: true,
                    url: '387d4578ceb243e484080a951cd6d3f9',
                  },
                  {
                    label: '313-10',
                    isChildren: true,
                    url: '103d986d354842869167b389d9dbef2e',
                  },
                ],
              },
              {
                label: '153皮带',
                isChildren: false,
                children: [
                  {
                    label: '153-1',
                    isChildren: true,
                    url: 'f7df20d34a994f7393186a0bb38fccc4',
                  },
                  {
                    label: '153-2',
                    isChildren: true,
                    url: '4c15ff1f0de3468d98a0120516cb8655',
                  },
                  {
                    label: '153-3',
                    isChildren: true,
                    url: '2a82000fdce54be3b3aa9028c54ec4d0',
                  },
                  {
                    label: '153-4',
                    isChildren: true,
                    url: '077a3629766f4d0aae9bb7e06983fa22',
                  },
                  {
                    label: '153-5',
                    isChildren: true,
                    url: '1aa5cc0c6b8646268fc38a7fee68dfc0',
                  },
                  {
                    label: '153-6',
                    isChildren: true,
                    url: '56222f7193c64dbfa2955a045b019c6a',
                  },
                  {
                    label: '153-7',
                    isChildren: true,
                    url: '4ac3050a57a7413aafe8935de656b52b',
                  },
                  {
                    label: '153-8',
                    isChildren: true,
                    url: '6f4dd94a4fed4a88a3fe2955a946ac31',
                  },
                  {
                    label: '153-9',
                    isChildren: true,
                    url: '272508fb108c460ca5c5451fee086130',
                  },
                  {
                    label: '153-11',
                    isChildren: true,
                    url: '1b263917f4914c36917eab855a184db4',
                  },
                  {
                    label: '153-12',
                    isChildren: true,
                    url: '1c61091d87ba4efd8d53249c51689ec0',
                  },
                  {
                    label: '153机尾-1',
                    isChildren: true,
                    url: '527c6105922149f4915071ea4e268c4d',
                  },
                  {
                    label: '153机尾-2',
                    isChildren: true,
                    url: '0399f6f9052e4f7188d5838c179bc741',
                  },
                  {
                    label: '153机尾-3',
                    isChildren: true,
                    url: '7b068805cc2a4f8d8281d7ea19537fe0',
                  },
                ],
              },
              {
                label: '154皮带',
                isChildren: false,
                children: [
                  { isChildren: true, url: 'e80099f0add4489b9f320a11ba5939bd', label: '154-1' },
                  { isChildren: true, url: '11bf6bdbd70f4769a4443fe6147c4c6e', label: '154-2' },
                  { isChildren: true, url: '2cb165e3e4054a5d9f2abe85520fa1c7', label: '154-3' },
                  { isChildren: true, url: 'b5df0e672b78465896807b01bccdce62', label: '154-4' },
                  { isChildren: true, url: 'f451b1db6ebb44448fe9abb6975c5289', label: '154-5' },
                  { isChildren: true, url: 'b2ecea587e0c42fab7ffd875fb0562ea', label: '154-6' },
                  { isChildren: true, url: 'dfa575bfa85b44e5895bf7dccc0ce2b0', label: '154-7' },
                  { isChildren: true, url: '0cda9d4776014728b6c83c7eacc39452', label: '154-8' },
                  { isChildren: true, url: '52f22d7a2a574f6aad717e4b6f598c61', label: '154-9' },
                  { isChildren: true, url: 'c9caffecfbae47d597748404de39281f', label: '154-10' },
                  { isChildren: true, url: 'd778302558b94ad2a2bcb3553025aa0a', label: '154-11' },
                  { isChildren: true, url: '8a39b661990946b68e912b32654aa2d5', label: '154-12' },
                  { isChildren: true, url: '31f636414cbc4de184eacac44770a3b1', label: '154-13' },
                  { isChildren: true, url: '9181f724ef624fd0bf69fb20c1e4543a', label: '154-14' },
                  { isChildren: true, url: 'f9de8e0e431d40c6b51617fbf7299819', label: '154-15' },
                  { isChildren: true, url: '3ccd0baa13ef40cfa094682634523b80', label: '154-17' },
                  { isChildren: true, url: '8ebbf9cc7fa64b31957d66d04c5ff533', label: '154-18' },
                  { isChildren: true, url: '93fc0de6d7eb4dbe94efe56e522bb58a', label: '154-19' },
                  { isChildren: true, url: '4a856c9afa9c4ae5bdc3b02cd3d8cdae', label: '154-20' },
                  { isChildren: true, url: 'ca00478dab5c4cb5bdd34ed3dc571b85', label: '154-21' },
                  { isChildren: true, url: 'ad726acadd8140278ece941c719373ae', label: '154-22' },
                  { isChildren: true, url: 'eaaebfbcf0614e0ab922fe66f3f2e812', label: '154-23' },
                  { isChildren: true, url: 'f30b2b6bf406485bba94afb15ef0d2f6', label: '154-24' },
                  { isChildren: true, url: '3b63307a2ede4e68b44a96cb4d57ff02', label: '154-25' },
                  { isChildren: true, url: 'a0b491975e694079b2f5cee0ecf87052', label: '154-26' },
                  { isChildren: true, url: 'ec31211b41a24e168bf9b34368f2300b', label: '154-27' },
                  { isChildren: true, url: 'e53a8d5a5a454f75bfd30fbd1fad4230', label: '154-28' },
                  { isChildren: true, url: '9e27aa20a59444a7a576b31367f510cf', label: '154-29' },
                ],
              },
              {
                label: '321皮带',
                isChildren: false,
                children: [
                  { isChildren: true, url: '4168492a4ebe4ecd9278d2207b534274', label: '321-1' },
                  { isChildren: true, url: '3483455205764f27bea2281bb6c117ec', label: '321-2' },
                  { isChildren: true, url: '3f7b73a7b8014eac93d406beafb70997', label: '321-3' },
                  { isChildren: true, url: '29dddfdb7dc2458db7d93baa4cf0af11', label: '321-4' },
                  { isChildren: true, url: '07b1e6a423244785ab9bd93faa1c892a', label: '321-5' },
                  { isChildren: true, url: '153ac54226a64c73a23556addc296743', label: '321-6' },
                  { isChildren: true, url: '12cead3fc6c44ee194a8bdfca323b93e', label: '321-7' },
                  { isChildren: true, url: 'c233a045ae5b4f618ea5070d44ae232d', label: '321-8' },
                  { isChildren: true, url: '1a5ea4e39519406d827ceb8ae4b29fa2', label: '321-9' },
                  { isChildren: true, url: '9c5da71dcec54b4e9777c74c587cf2e0', label: '321-10' },
                  { isChildren: true, url: '12bfda8b5fbb494fa29214570c7a4dc2', label: '321-11' },
                ],
              },
              {
                label: '322皮带',
                isChildren: false,
                children: [
                  { isChildren: true, url: '085f4914642e40e49deb398f6499a46b', label: '322-1' },
                  { isChildren: true, url: 'c39316bf53f94981bef11da242db27e6', label: '322-2' },
                  { isChildren: true, url: 'c64fe3f1b4bb450c951ac648a8658e3b', label: '322-3' },
                  { isChildren: true, url: '262244a794ea4153ac8fa83281363f93', label: '322-4' },
                ],
              },
              {
                label: '323皮带',
                isChildren: false,
                children: [],
              },
              {
                label: '164皮带',
                isChildren: false,
                children: [
                  { isChildren: true, url: '52f511bfd9394db498f4af0354cd7061', label: '164机尾-1' },
                  { isChildren: true, url: '1f9ba4e102bf40e1b03912d792a8dd1d', label: '164机尾-2' },
                  { isChildren: true, url: '156f4e7a019e4ec683bff4edd95b6cec', label: '164机尾-3' },
                  { isChildren: true, url: '37165a3579a4469691887f80e6e15c75', label: '164机尾-4' },
                  { isChildren: true, url: '34af82789e514f4f8468c5581a64bccb', label: '164-1' },
                  { isChildren: true, url: '65c480521dd14e08a7ebfbe58e764ead', label: '164-3' },
                  { isChildren: true, url: 'c52775d52b26467d90a8c41a841633ed', label: '164-4' },
                  { isChildren: true, url: '046bb0380cc84a8dbb01ec9019c6a787', label: '164-5' },
                  { isChildren: true, url: 'a47f72b343a2407cab6d801ee6e4fdbf', label: '164-6' },
                  { isChildren: true, url: '8c2efbd55aa34fdf8897eaaa7ba093e3', label: '164-7' },
                  { isChildren: true, url: '198be9d3736a451e906cefec50202a47', label: '164-8' },
                  { isChildren: true, url: '8a150a43f8d646cab42048b5f184b0ff', label: '164-9' },
                  { isChildren: true, url: 'fffe6b02b375425e984537fcdcab06f6', label: '164-10' },
                  { isChildren: true, url: 'a6e3132294574bae8f3e1cc3c9bb2ba9', label: '164-11' },
                  { isChildren: true, url: 'c316d5c637a74c49933a301005ead600', label: '164-12' },
                  { isChildren: true, url: 'abeeb4e8b56f4097947d7e340dd6650e', label: '164-13' },
                  { isChildren: true, url: '8125d881a7814b4b88d00885ba47f31a', label: '164-14' },
                  { isChildren: true, url: '55b26a0713984119bb90659b84fa1408', label: '164-15' },
                  { isChildren: true, url: '8b1a552159a948719ec42b8d762455ca', label: '164-16' },
                  { isChildren: true, url: '50b1d5de5fd04ff29b08ab80ee834f81', label: '164-17' },
                  { isChildren: true, url: '23137a40635546cf8c32416c3c328277', label: '164-18' },
                  { isChildren: true, url: '95d9990a24364f46a758195adef1f3f5', label: '164-19' },
                ],
              },
              {
                label: '智能识别画面',
                isChildren: false,
                children: [
                  { isChildren: true, url: 'ef216559a1d644a193002431a3866d20', label: '164机头减速机1热成像' },
                  { isChildren: true, url: '81d6d0c3109142b1b0580ab923abd5f0', label: '164机头电机热成像' },
                  { isChildren: true, url: '77754a057120476e8d309c46485f2155', label: '154减速机热成像' },
                  { isChildren: true, url: 'f5133643775c484881f9994643a26e1b', label: '312减速机热成像' },
                  { isChildren: true, url: '6d927bca6b394f14bfa4259b00d5dc00', label: '322减速机热成像' },
                  { isChildren: true, url: '19fb97b4b80749ee92cd6b8443acbf58', label: '312减速机热成像' },
                  { isChildren: true, url: 'e07ffa2b7ab74228a2647d5f26009c28', label: '153箱变热成像' },
                  { isChildren: true, url: '70be4f9ea43344f6ba6801ea29509dc9', label: '321箱变热成像' },
                  { isChildren: true, url: 'f7134a0935824df2916a58666b3972a6', label: '321皮带滚筒防护罩识别' },
                  { isChildren: true, url: 'd78f5ab9b2034d84a335de2fe5ae69f0', label: '322机尾滚筒（311-4）' },
                  { isChildren: true, url: '0ed7701d1ffc47a7bfbe1b7a65c929b7', label: '322安全帽工装口罩识别' },
                  { isChildren: true, url: '10f327e71b0b499a971c0f86751947e0', label: '311皮带撕裂识别' },
                  { isChildren: true, url: 'c6487b170ed54c71bf63bc707b0e480e', label: '313皮带撕裂识别' },
                  { isChildren: true, url: '0fc5aa596b294f0baf0aa633ee644f42', label: '153安全帽工装口罩识别' },
                  { isChildren: true, url: '2a258c21a59d4f718397565507ccab49', label: '321安全帽工装口罩识别' },
                  { isChildren: true, url: '4b5c85be4d94414a96a0aaa8928ee960', label: '164安全帽工装口罩识别' },
                  { isChildren: true, url: '14fa47332573435e8621aac9e2ac6b65', label: '312-322机头安全帽防尘口罩识别' },
                  { isChildren: true, url: '50509e81928d42d0ad262cad493c5d48', label: '311机头安全帽工装防尘口罩识别' },
                  { isChildren: true, url: '53e1e919924541bd88ea198a4d160951', label: '164机头安全帽反光衣识别' },
                  { isChildren: true, url: 'c00855e083ea4db0bf85d44820223237', label: '313安全帽工装防尘口罩识别' },
                ],
              },
              {
                label: '沿线立杆',
                isChildren: false,
                children: [
                  { isChildren: true, url: '9e1abfc3977d451688af4d4d9a85e928', label: '311立杆1' },
                  { isChildren: true, url: '4cde3d380e07423593e8ddcd98128a57', label: '311立杆2' },
                  { isChildren: true, url: '33912d6a6096440daca7d6e90e8e28dd', label: '311立杆3' },
                  { isChildren: true, url: '2a278552973048a7b3eb8d0f47acf406', label: '313立杆1' },
                  { isChildren: true, url: '4ad779c7e6da4f528fcb914bf023ee8e', label: '313立杆4' },
                  { isChildren: true, url: '79238b0d232445cd83a7ece65b97a017', label: '313立杆5' },
                  { isChildren: true, url: '096b1238bc9c42ae8e57ead17117c302', label: '313立杆6' },
                  { isChildren: true, url: '6a05caad15c541d9b03efc0bc99342bf', label: '164立杆1' },
                  { isChildren: true, url: '12231712396d4477bd98d254805a66f2', label: '164立杆2' },
                  { isChildren: true, url: 'b7aa7a05dcd94014827caab9e2e65844', label: '164立杆3' },
                  { isChildren: true, url: '04f453c9504048c1a49b01b2b8701003', label: '164立杆4（153箱变）' },
                  { isChildren: true, url: 'd590196e8b854b51982e95ae1037f3bf', label: '164立杆5' },
                  { isChildren: true, url: '98f84d0cd06740b7a1e53e4606d4f04e', label: '164立杆6' },
                  { isChildren: true, url: 'a40b4982bd6a41539df8ab8b94f01a1d', label: '164立杆7' },
                  { isChildren: true, url: '813edd96043249fb98b0417f2cfd99ef', label: '164立杆8' },
                  { isChildren: true, url: 'd4ca14ba8f6b4a3e8b13878dfcaad712', label: '323立杆1' },
                  { isChildren: true, url: 'b8f2bbc5f7df4ef18ff97f5932efa156', label: '323立杆2' },
                  { isChildren: true, url: '2161564535ad477092c122d446818857', label: '153立杆2' },
                  { isChildren: true, url: '99ff0b17216f4152a87a20777200d5d6', label: '154立杆1' },
                  { isChildren: true, url: 'f04fec5c524a4993915d063995c88803', label: '154沿线立杆' },
                  { isChildren: true, url: '89a8049b2c944972b9076111dcf09d36', label: '321结机尾沿线（立杆18）' },
                  { isChildren: true, url: '2521c9d8da394af7a631c5e576b72675', label: '321立杆1' },
                ],
              },
            ],
          },
        ],
        defaultProps: {
          children: 'children',
          label: 'label',
        },
      };
    },
    mounted() {
      // this.webRtcServer = new WebRtcStreamer(
      //   'video',
      //   'http://10.13.154.17:8000', //本机ip+端口8000
      // )
      // this.webRtcServer.connect(
      //   'rtsp://10.13.155.11:554/openUrl/MMeqLzW', //这是填自己的rtsp流
      // )
    },
    methods: {
      videoClick(length) {
        if (length > this.videoList.length) {
          let sum = length - this.videoList.length;
          for (let i = 0; i < sum; i++) {
            this.videoList.push({ index: i + this.videoList.length, url: '' });
          }
        }
        if (length < this.videoList.length) {
          let sum = this.videoList.length - length;
          this.videoList.splice(length - 1, sum);

          // for (let i = 0; i <= sum; i++) {
          //   //   this.videoList.push({ index: i + this.videoList.length, url: '' })
          //   console.log(i)
          //   console.log(this.videoList);
          // }
        }
      },
      handleNodeClick(data) {
        // console.log(data);
        // document.getElementById('myIframe1').src = "http://localhost:10087/vlc.html?mrl=rtsp://10.13.155.11:554/openUrl/rHEstFu";
        if (data.isChildren) {
          axios.get('http://localhost:8888/api/v1/candidates/' + data.url).then((data) => {
            // alert(data.data);
            // console.log(data.data);
            // document.getElementById('myIframe1').src = "http://localhost:10087/vlc.html?mrl=" + data.data;
            if (this.currentIndex <= this.videoList.length - 1) {
              this.show = false;
              this.$nextTick(() => {
                this.videoList[this.currentIndex].url = 'http://localhost:10087/vlc.html?mrl=' + data.data;
                this.show = true;
              });

              // document.getElementById('iframeVideo')[this.currentIndex].src = "http://localhost:10087/vlc.html?mrl=" + data.data.url;
              this.currentIndex++;
            } else {
              this.show = false;
              this.currentIndex = 0;
              this.$nextTick(() => {
                this.videoList[this.currentIndex].url = 'http://localhost:10087/vlc.html?mrl=' + data.data;
                this.show = true;
                this.currentIndex++;
              });
              // document.getElementById('iframeVideo')[this.currentIndex].src = "http://localhost:10087/vlc.html?mrl=" + data.data.url;
            }
          });
          // .then(data => (this.postId = data.id));
          // .then(response => console.log(response.json()))
          // request({
          //     url: 'http://127.0.0.1:8082/wx/user/getRtsp',
          //     method: 'post',
          //     params
          // }).then(response => {
          //     console.log(response.data)
          // })
          // var rtspUrl = "rtsp://10.13.155.11:554/openUrl/WuIIRiM";
          // var videoUrl = "http://localhost:10087/vlc.html?mrl=" + rtspUrl;
          // if (this.currentIndex <= this.videoList.length - 1) {
          //     this.videoList[this.currentIndex].url = videoUrl
          //     this.currentIndex++
          // } else {
          //     this.currentIndex = 0
          //     this.videoList[this.currentIndex].url = videoUrl
          //     this.currentIndex++
          // }
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .nav {
    div {
      flex: 1;
    }
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #02041b;
    .title {
      width: 400px;
      height: 50px;
      color: #46a6f8;
      background-image: url('../../assets/bt_2.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
    }
    .gradient-text-one {
      display: flex;
      align-items: center;
      height: 50px;
      font-size: 25px;
      font-weight: bold;
      padding: 30px;
      background-image: -webkit-linear-gradient(bottom, #76b3ff, #76b3ff, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .wrapper {
    width: 100%;
    height: calc(100vh - 110px);
    display: flex;
    align-items: center;
    background-color: #050a32;
    .left {
      width: 20%;
      height: 100%;
      padding: 20px;
      .from {
        height: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
      }
      .tree {
        width: 100%;
        height: 55%;
        overflow: auto;
      }
      .title {
        color: #fff;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-top: 10px;
      }
      a {
        text-decoration: none;
      }
      .nav-item {
        height: 60px;
        display: flex;
        align-items: center;
        padding-left: 20%;
        color: #fff;
        background-color: #051751;
        margin-top: 2px;
      }
    }
  }

  .right {
    width: 80%;
    height: 100%;
    background-color: #050a32;
    .video-bottom {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      img {
        margin-right: 10px;
      }
    }
    .video {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;
      .video-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .box-item {
          width: 49.9%;
          height: 50%;
          background-color: #262626;
          border: 1px solid #02041b;
        }
      }
    }
  }
  ::v-deep .el-tree {
    color: #fff;
    background-color: transparent;
  }
  ::v-deep.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #183056;
  }
  ::v-deep .el-tree-node__content:hover {
    background-color: #050a32;
  }
  ::v-deep .is-focusable:focus {
    background-color: #183056;
  }
  ::v-deep .el-input__inner {
    background-color: #000;
    color: #fff;
    border: 1px solid #3c62c0;
  }
  ::-webkit-scrollbar-track-piece {
    background: transparent;
  }
  ::-webkit-scrollbar {
    width: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background: #4e4e4e;
    border-radius: 20px;
  }
</style>
